<!-- 题目导入 选择文件框 -->
<template>
  <el-dialog
    custom-class="topicImportDia"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="批量导入试题"
    :visible="open"
    width="700px"
    append-to-body
    @close="cancel()"
  >
    <div class="all_content">
      <div class="upload_total">
        <div class="up_excel_title">第一步：下载模版</div>
        <div class="up_excel_all">
          <div @click="downLoadExcel">
            <img
              class="up_excel"
              src="@/assets/images/upload/excel.png"
              alt="加载失败"
            />
            <el-link class="link_txt" type="success">下载EXCEL模板</el-link>
          </div>
          <div @click="downLoadWord" style="margin-left: 80px">
            <img
              class="up_excel"
              src="@/assets/images/upload/word.png"
              alt="加载失败"
            />
            <el-link class="link_txt" type="success">下载WORD模板</el-link>
          </div>
        </div>
        <div class="up_excel_title2">第二步：使用模版上传试题</div>
        <div class="up_excel_tip2">仅支持Word和Excel两种格式，点击</div>
        <upload-excel
          @uploadFiles="uploadFiles"
          @uploadWords="uploadWords"
        ></upload-excel>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { importValidate } from '@/api/ExaminationModule'
import uploadExcel from '@/components/uploadExcel/uploadExcel'

export default {
  components: { uploadExcel },
  props: {
    open: Boolean,
    indexId: [String, Number]
  },
  data() {
    return {}
  },
  watch: {
    open(e) {
      if (e) {
      }
    }
  },
  methods: {
    async uploadFiles(formData) {
      formData.append('indexId', this.indexId)
      if (formData) {
        const loading = this.$loading({
          lock: true,
          text: '上传试题检验中…',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.3)'
        })
        try {
          let res = await importValidate(formData)
          const { code, data } = res
          if (code == 200) {
            data.map((item) => {
              item.question = item.question ? item.question.replace(/^\d+\.\s*/, '').trim() : ''
              console.log(item.question)
            })
            this.$emit('topicGet', data)
            this.$emit('update:open', false)
          }
        } catch (e) {
          console.error(e)
        } finally {
          loading.close()
        }
      }
    },
    async uploadWords(formData) {
      formData.append('indexId', this.indexId)
      if (formData) {
        const loading = this.$loading({
          lock: true,
          text: '上传试题检验中…',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.3)'
        })
        try {
          let res = await importValidate(formData)
          const { code, data } = res
          if (code == 200) {
            this.$modal.msgSuccess('上传成功')
            data.map((item) => {
              item.question = item.question ? item.question.replace(/^\d+\.\s*/, '').trim() : ''
              console.log(item.question)
            })
            this.$emit('topicGet', data)
            this.$emit('update:open', false)
          }
        } catch (e) {
          console.error(e)
        } finally {
          loading.close()
        }
      }
    },
    downLoadExcel() {
      let url =
        'https://hgcc.oss-cn-hangzhou.aliyuncs.com/yzx/excelNewFile.xls'
      window.open(url)
    },
    downLoadWord() {
      let url =
        'https://hgcc.oss-cn-hangzhou.aliyuncs.com/yzx/wordNewFile.docx'
      window.open(url)
    },
    // 取消按钮
    cancel() {
      this.$emit('update:open', false)
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog .el-dialog__body {
  padding: 22px 61px 39px 54px !important;
}

.all_content {
  width: 100%;
}

.upload_total {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.up_excel_title {
  margin-bottom: 20px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
}

.up_excel_title2 {
}

.up_excel_all {
  display: flex;
  justify-content: center;
  //flex-direction: column;
  align-items: center;
  cursor: pointer;
  margin-bottom: 10px;

  .up_excel {
    display: block;
    width: 45px;
    height: 56px;
    margin: 0 auto;
  }

  .link_txt {
    margin-top: 10px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-decoration-line: underline;
  }
}

.up_excel_title2 {
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  margin-top: 30px;
}

.up_excel_tip2 {
  margin-bottom: 15px;
  margin-top: 10px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
</style>
